<template>
	<view>
		<view class="u-demo-block__content" style="margin: 16rpx;">
			<view class="u-page__tag-item">
				<u-search v-model="value5"></u-search>
			</view>
		</view>
		<view>
			<!-- <u-tabs :list="list1" @click="tabClick"></u-tabs> -->
			    <u-tabs
					@click="tabClick"
			        :list="list1"
			        lineWidth="60"
			        lineColor="#f56c6c"
			        :activeStyle="{
			            color: '#303133',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }"
			        :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }"
			        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
					<view
						slot="right"
						style="padding-left: 10px;"
						@tap="tabClick">
						<u-icon
								name="list-dot"
								size="30"
								bold>
						</u-icon>
					</view>
			    </u-tabs>
		</view>
		<view class="card-container">
			<view v-for="(work, index) in this.workOrderList"
			class="card-wrap"
			:class="{ 'card-wrap-selected': work.selectedCard === 1 }"
			@click="selectCard(work)">
				<view class="card-item">
					产品名称：<u-tag text="一次性使用无菌导管鞘组（半成品）" plain size="mini" type="warning"></u-tag>
				</view>
				<view class="card-item">
					规格型号：<u-tag text="IS-0409(桡动脉)" plain></u-tag>
				</view>
				<!-- <view class="card-item">
					联系方式：<u--input placeholder="请输入内容" border="surround" v-model="value" @change="change"></u--input>
				</view> -->
				<view class="card-item">
					<!-- <text class="card-item-txt">生产工单：XSDD040716#YCDD2024081001#14</text> -->
					生产工单：<u-tooltip text="XSDD040716#YCDD2024081001#14" bgColor="#e3e4e6"></u-tooltip>
				</view>
				<view class="card-item">
					订单合同：<u-tooltip text="YCDD2024081001" bgColor="#e3e4e6"></u-tooltip>
				</view>
				<view class="card-item">
					<u-icon name="calendar" size="24"></u-icon>预计完工：2024-08-12
				</view>
				<view class="card-item">产品数量：50</view>
				<view class="card-btns">
					<u-checkbox-group
							v-model="work.checkboxValue1"
							placement="column"
							@change="checkboxChange(work)">
							<u-checkbox
								:customStyle="{marginBottom: '8px'}"
								v-for="(item, index) in work.checkboxList1"
								:key="index"
								:label="item.name"
								:name="item.name">
							</u-checkbox>
						</u-checkbox-group>
				</view>
			</view>
		</view>
		<FloatScanButton type="primary" icon="scan" @click="floatOnclick()"></FloatScanButton>
		
		<!-- 点击选择产品 ，弹出产品类型选框 -->
		<u-popup
			:safeAreaInsetBottom="true"
			:safeAreaInsetTop="true"
			:mode="popupData.mode"
			:show="show"
			:round="popupData.round"
			:overlay="popupData.overlay"
			:borderRadius="popupData.borderRadius"
			:closeable="popupData.closeable"
			:closeOnClickOverlay="popupData.closeOnClickOverlay"
			@close="close"
			@open="open"
			customStyle="max-height: 100vh; overflow-y: auto; overflow-x: hidden;">
			<view
				class="u-popup-slot"
				:style="{
					width: '240px',
					marginTop: '20rpx',
				}">
				 <view style="margin-left: 5px;"><u--text text="选择产品:" type="info"></u--text></view>
				 <u-line></u-line>
				 <u-row customStyle="margin-bottom: 4px" v-for="(group, groupIndex) in groupedProductList" :key="groupIndex">
					<u-col span="6" v-for="(product, productIndex) in group" :key="product.productId">
						<u-tag :text="`${product.productName}`" 
						:plain="!product.checked" 
						type="warning" 
						:name="`${product.productId}`" 
						style="margin: 5px; white-space: normal; word-wrap: break-word;"
						@click="productSelected"></u-tag>
					</u-col>
					<!-- <u-col span="6">
						<u-tag :text="`选项1`" :plain="false" type="warning" :name="1" style="margin: 5px;"></u-tag>
					</u-col> -->
				</u-row>
				<u-row customStyle="margin-bottom: 4px; margin-top: 30px;" gutter="6" >
					<u-col span="6">						
						<u-button type="primary" @click="close" style="margin: 5px;">确认</u-button>
					</u-col>
					<u-col span="6">
						<!-- <u-tag :text="`选项1`" :plain="false" type="warning" :name="1" style="margin: 5px;"></u-tag> -->
						<u-button type="warning" @click="reset" style="margin-right: 5px;">重置</u-button>
					</u-col>
				</u-row>
				<!-- <u-row customStyle="margin-bottom: 4px">
					<u-col span="6">
						<u-tag :text="`选项2`" :plain="true" type="warning" :name="1" style="margin: 5px;"></u-tag>
					</u-col>
					<u-col span="6">
						<u-tag :text="`选项3`" :plain="false" type="warning" :name="1" style="margin: 5px;"></u-tag>
					</u-col>
				</u-row> -->
				<!-- Floating buttons -->
				<!-- <view 
				  style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 240px; background-color: white; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);"
				>
				  <view style="display: flex; justify-content: space-between; padding: 10px;">
					<u-button type="default">取消</u-button>
					<u-button type="primary">确认</u-button>
				  </view>
				</view> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
	
import FloatScanButton from '@/components/button/FloatScanButton'
export default {
	components: {
		FloatScanButton,
	},
	data() {
		return {
			workOrderList: [
				{
					selectedCard: 0,
					checkboxValue1: [],
					checkboxList1: [{name: '选中',disabled: false}],
				},
				{
					selectedCard: 0,
					checkboxValue1: [],
					checkboxList1: [{name: '选中',disabled: false}],
				},
				{
					selectedCard: 0,
					checkboxValue1: [],
					checkboxList1: [{name: '选中',disabled: false}],
				}
			],
			list1: [{
				name: '默认排序',
			}, {
				name: '班组分组',
			}, {
				name: '选择产品'
			}],
			productList: [
				{productId: 1, productName: "血管造影导管（半成品）", checked: false},
				{productId: 2, productName: "连通板（半成品）", checked: false},
				{productId: 3, productName: "指引导管（半成品）", checked: false},
				{productId: 4, productName: "一代桡动脉止血带（半成品）", checked: false},
				{productId: 5, productName: "压力泵1（半成品）", checked: false},
				{productId: 6, productName: "SC球囊（半成品）", checked: false},
				
			],
			groupedProductList: [],
			popupData: {
				overlay: true,
				mode: 'right',
				closeOnClickOverlay: true
			},
			show: false,
			radios: [
				{checked: true},
				{checked: false},
				{checked: false}
			],			
			value5: "",
			value: "",
			checked: ["选中"],
			checkboxList1: [{
					name: '选中',
					disabled: false
				}
			],
			// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
			checkboxValue1: [],
			selectedCard: null, // 选中的卡片ID
		}
	},
	methods: {
		groupedProducts() {
			const size = 2;
		      return this.productList.reduce((result, item, index) => {
		        const chunkIndex = Math.floor(index / size);
		        if (!result[chunkIndex]) {
		          result[chunkIndex] = [];
		        }
		        result[chunkIndex].push(item);
		        return result;
		      }, []);
		},
		productSelected(name){
			const found = this.productList.find(item => item.productId === Number(name));
			console.log("click", name, found);
			if (found) {
				found.checked = !found.checked;
			}
			for(let item of this.productList) {
				if(item.productId !== found.productId) {
					item.checked = false;
				}
			}
		},
		change(e) {
			console.log("onchange", e);
		},
		checkboxChange(work) {
			console.log("work=", work);
			if(work.selectedCard === 1) {
			  work.checkboxValue1 = [];
			  work.selectedCard = 0;
			} else {
			  work.checkboxValue1 = ['选中'];
			  work.selectedCard = 1;
			}
		},
		tabClick(item) {
			console.log('item', item);
			uni.$u.sleep().then(() => {
				this.show = !this.show
			});
			this.groupedProductList = this.groupedProducts();
		},
		selectCard(work) {
			console.log("work=", work);
			if(work.selectedCard === 1) {
				work.checkboxValue1 = [];
				work.selectedCard = 0;
			} else {
				work.checkboxValue1 = ['选中'];
				work.selectedCard = 1;
			}
		},
		floatOnclick() {
			console.log("float");
			for(let work of this.workOrderList) {
			  work.checkboxValue1 = ['选中'];
			  work.selectedCard = 1;
			}
		},
		open() {
			// console.log('open');
			document.body.style.overflow = 'hidden'; // 禁用背景页面滚动
		},
		close() {
			this.show = false
			// console.log('close');
			document.body.style.overflow = ''; // 恢复背景页面滚动
		},
		reset() {
			for(let item of this.productList) {
				item.checked = false;
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.card-container{
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
	padding: 16rpx;
	background-color: #ECECEC;
}
.card-wrap{
	padding: 24rpx;
	border-radius: 12rpx;
	margin-bottom: 24rpx;
	background-color: #FFF;
	border: 1px solid #ddd; /* 默认边框 */
	transition: background-color 0.3s, border-color 0.3s;
	.card-item{
		display: flex;
		align-items: center;
		font-size: 32rpx;
		padding-bottom: 20rpx;
		color: #111111;
	}
	.card-item-txt{
		flex:1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
.card-btns{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.card-btns uni-button {
  flex: 1;
  margin: 0 5px; /* 调整按钮间距 */
}
.card-wrap-selected {
  border-color: #007bff; /* 选中状态的边框颜色 */
  background-color: #e7f0ff; /* 选中状态的背景颜色 */
}

.demo-layout {
	height: 25px;
	border-radius: 4px;
}
.bg-purple {
	background: #CED7E1;
}
.bg-purple-light {
	background: #e5e9f2;
}
</style>
